<template>
  <div
    class="qusuiji"
    v-show="isQuxian"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="biaoti">{{areaCity.name}}双随机情况</div>
    <div id="qusuiji"></div>
    <div class="end">
      <div id="wancheng" style="height:100%;width:50%;"></div>
      <div id="wanjie" style="height:100%;width:50%;"></div>
    </div>
  </div>
</template>

<script>
import Bus from "@/plugs/bus";
import { getQuXianShuangSuiJi } from "@/api/gaikuang";
export default {
  name: "QuSuiJi",
  data() {
    return {
      loading: true,
      areaCity: { name: "文安县", code: "131026" },
      isQuxian: false,
      suijidata: {
        wanchenglv: 100,
        wanjielv: 90,
        echart: [200, 20, 7, 10, 30]
      }
    };
  },
  methods: {
    async getData() {
      this.loading = true;
      let y = new Date().getFullYear();
      this.suijidata = {
        wanchenglv: 0,
        wanjielv: 0,
        echart: [0, 0, 0, 0, 0]
      };
      // try {
      var json = (
        await getQuXianShuangSuiJi({
          year: this.$store.state.YEAR,
          code: this.areaCity.code
        })
      ).data.data[0];
      // } catch (error) {
      //   var json = {
      //     total: 78, //总数
      //     jtotal: 4, //	任务关闭-集中空调
      //     gtotal: 0, //关闭数
      //     wtotal: 66, //完成数
      //     wfjdtotal: 11, //无法监控数
      //     jiaoxuedian: 0 //任务关闭教学点
      //   };
      // }

      this.suijidata.wanchenglv = ((json.wtotal / json.total) * 100).toFixed(2);
      this.suijidata.wanjielv = (
        ((json.wtotal + json.gtotal + json.wfjdtotal) / json.total) *
        100
      ).toFixed(2);

      this.suijidata.echart = [
        json.wtotal,
        json.jtotal,
        json.wfjdtotal,
        json.gtotal,
        json.jiaoxuedian
      ];

      this.init();
      this.loading = false;
    },
    init() {
      this.suiji0 = this.suiji();
      this.suiji1 = this.drawCircular2(
        "wancheng",
        this.suijidata.wanchenglv,
        "完成率"
      );
      this.suiji2 = this.drawCircular2(
        "wanjie",
        this.suijidata.wanjielv,
        "完结率"
      );
    },
    suiji() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("qusuiji"));
      var m2R2Data = [
        { value: this.suijidata.echart[0], name: "完成数" },
        { value: this.suijidata.echart[1], name: "任务关闭-集中空调" },
        { value: this.suijidata.echart[2], name: "无法监控数" },
        { value: this.suijidata.echart[3], name: "关闭数" },
        { value: this.suijidata.echart[4], name: "任务关闭教学点" }
      ];

      let zong = 0;
      for (let item of m2R2Data) {
        zong += item.value;
      }

      let option = {
        color: ["#6bca56", "#f8c52b", "#4e84ff", "#ec7676", "#ec7b37"],
        title: [
          {
            text: ["{a|任务总数}", "{b|" + zong + "}"].join("\n"),
            textStyle: {
              rich: {
                a: {
                  color: "#fff",
                  fontSize: 14,
                  lineHeight: 30
                },
                b: {
                  color: "#07ccff",
                  fontSize: 30,
                  lineHeight: 30
                }
              }
            },
            textAlign: "center",
            x: "49%",
            y: "36%"
          }
        ],
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          left: "center",
          bottom: 0,
          itemGap: 10,
          textStyle: {
            color: "#fff"
          },
          icon: "circle"
        },
        series: [
          {
            name: "标题",
            type: "pie",
            center: ["center", "45%"],
            radius: ["40%", "65%"],
            startAngle: 300,
            // minShowLabelAngle: 5,
            hoverAnimation: false,
            label: {
              normal: {
                show: true,
                position: "outter",
                formatter: "{c}",
                fontSize: 20
              }
            },
            // labelLine: {
            //     length: 30,
            //     length2: 10,
            //     lineStyle: {
            //         width: 2,
            //     }
            // },
            data: m2R2Data
          }
        ]
      };
      myChart.setOption(option);
      myChart.resize();
      return myChart;
    },
    drawCircular2(id, value, title) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(id));
      // 绘制图表
      let option = {
        title: [
          {
            show: true,
            text: value + "%",
            x: "center",
            y: "34%",
            textStyle: {
              fontSize: "16",
              color: "#5eba3b"
            }
          },
          {
            show: true,
            text: title,
            x: "center",
            bottom: "10%",
            textStyle: {
              fontSize: "18",
              color: "#07ccff"
            }
          }
        ],
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}%"
        },
        color: ["#5eba3b", "#36335e"],
        series: {
          name: "",
          type: "pie",
          radius: ["36%", "56%"],
          center: ["50%", "40%"],
          hoverAnimation: false,
          label: {
            normal: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            { name: "已完成", value: value },
            { name: "未完成", value: 100 - value }
          ]
        }
      };
      myChart.setOption(option);
      myChart.resize();
      return myChart;
    },
    suijishu(num) {
      if (num > 1) {
        let arr = [];
        for (let i = 0; i < num; i++) {
          arr.push((Math.random() * 100).toFixed(0));
        }
        return arr;
      } else {
        return (Math.random() * 100).toFixed(0);
      }
    },
    windowChange() {
      try {
        this.suiji0.resize();
        this.suiji1.resize();
        this.suiji2.resize();
      } catch (error) {}
    }
  },
  created() {
    this.getData();
    Bus.$on("changeSize", e => {
      this.windowChange();
    });
    Bus.$on("isQuxian", e => {
      this.isQuxian = e;
    });
    Bus.$on("AreaItem", e => {
      if (this.isQuxian) {
        this.areaCity = e;
        this.getData();
      }
    });
  }
};
</script>

<style scoped lang="less">
.qusuiji {
  // grid-row: 2 / span 4;
  border: 0.0625rem solid #2c4daa;

  .biaoti {
    font-size: 1.25rem;
    text-align: center;
    color: #07ccff;
    line-height: 3.125rem;
  }

  #qusuiji {
    width: 100%;
    height: 60%;
  }

  .end {
    display: flex;
    height: 30%;
  }
}
</style>